<template>
  <view class="component-car-detail">
    <view class="image-swipe-view">
      <swiper :indicator-dots="true" :autoplay="true" interval="3000" duration="500"
              style="width: 750rpx;height:400rpx">
        <block v-for="(image, index) in carDetail.images" :key="index">
          <swiper-item>
            <image style="width: 750rpx;height:400rpx" :src="image" mode="aspectFill"/>
          </swiper-item>
        </block>
      </swiper>
      <icons size="50" class="swipe-heart"
             :src="carDetail.cusfgz === 'Y'?'/static/icon/heart.svg': '/static/icon/heart-light.svg'"
             @tap="attention"/>
    </view>
    <slot name="tag"/>
    <view class="content-msg-view">
      <view class="msg1">
        {{ carDetail.cxmc ? carDetail.cxmc.match(carDetail.ppmc) ? '' : carDetail.ppmc : carDetail.ppmc }}
        {{ carDetail.cxmc ? carDetail.cxmc.match(carDetail.cimc) ? '' : carDetail.cimc : carDetail.cimc }}
        {{ carDetail.cxmc }}
      </view>
      <view class="msg2">
        <text>{{ carDetail.calich }} 公里 {{ carDetail.caccrq }}</text>
        <text v-if="carDetail.cusfgz === 'Y'">已关注</text>
      </view>
      <slot name="content"/>
    </view>
    <view class="car-config-view" v-if="showConfigInfo">
      <van-collapse :value="activeNames" @change="activeNames = $event.detail">
        <van-collapse-item v-for="(name, index) in collapses" :key="index" :name="name" :is-link="false">
          <slot-view name="title">
            <view class="collapse-title">{{ name }}：</view>
          </slot-view>
          <slot-view name="value">
            <view style="display: flex; justify-content: flex-end;">
              <text class="collapse-title1">{{ activeNames.includes(name) ? '收起' : '展开' }}</text>
              &nbsp;
              <image class="tag-svg" :class="activeNames.includes(name)?'tag-svg-zk':''"
                     src="/static/icon/tag1.svg"/>
            </view>
          </slot-view>
          <view v-if="name === '车辆信息'" class="car-config-view">
            <view>
              VIN：
              <text>{{ carDetail.vin }}</text>
            </view>
            <view style="font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;">
              市场指导价：
              <text>￥{{ carDetail.mdsczd }}</text>
            </view>
            <slot name="config"/>
            <view v-if="carDetail.caspbh">
              商品编号：
              <text>{{ carDetail.caspbh }}</text>
            </view>
            <view>
              品牌：
              <text>{{ carDetail.ppmc }}</text>
            </view>
            <view>
              车系：
              <text>{{ carDetail.cimc }}</text>
            </view>
            <view>
              颜色：
              <text>{{ carDetail.caycmc }}</text>
            </view>
            <view>
              变速箱：
              <text>{{ bszhOption[carDetail.cabisx] }}</text>
            </view>
            <view>
              排量：
              <text>{{ carDetail.capail }}</text>
            </view>
            <view>
              行驶里程：
              <text>{{ carDetail.calich }} 公里</text>
            </view>
            <view>
              排放标准：
              <text>{{ pfbzOption[carDetail.capfbz] }}</text>
            </view>
            <view>
              首次上牌：
              <text>{{ carDetail.cascsp }}</text>
            </view>
            <view>
              生产年限：
              <text>{{ carDetail.cachel }}</text>
            </view>
            <view>
              车牌：
              <text>{{ carDetail.cachep }}</text>
            </view>
            <view>
              存放地：
              <text>{{ carDetail.caclsz }}</text>
            </view>
            <view>
              过户次数：
              <text>{{ carDetail.caghcs }}</text>
            </view>
            <view>
              产地：
              <text>{{ cdOption[carDetail.casfjk] }}</text>
            </view>
          </view>
          <view v-else-if="name === '车况信息'" class="car-config-view">
            <view>
              <view style="padding: 2.5px 0;">保险到期：
                <text>{{ carDetail.cabxdq }}</text>
              </view>
              <view style="padding: 2.5px 0;">保险说明：
                <text>{{ carDetail.cabxsm }}</text>
              </view>
            </view>
            <view class="btn-div1" v-if="showDetectionBtn">
              <!--              <view class="config-btn" @tap="">检测信息查询</view>-->
              <!--              <view class="config-btn" ><a  class="config-btn" :href="carDetail.cajclj">检测信息查询</a></view>-->
              <view class="config-btn" @tap="seereport()">检测信息查询</view>
            </view>
            <view class="msg-row">
              重点损伤说明：
              <view>
                {{ carDetail.cassms }}
              </view>
            </view>
            <view class="msg-row">
              车辆情况说明：
              <view>
                {{ carDetail.cacksm }}
              </view>
            </view>
          </view>
          <view v-else class="car-config-view">
            <view>车辆图片</view>
            <view class="btn-div1">
              <view class="config-btn" @tap="carImages()">查看</view>
            </view>
          </view>
        </van-collapse-item>
      </van-collapse>
    </view>
  </view>
</template>

<script>
import {carAttention, carDetailById} from 'src/api/shoplarge/auctionProject'

export default {
  components: {},
  props: {
    params: {
      type: Object,
      default() {
        return {}
      }
    },
    showConfigInfo: { // 是否显示车辆配置信息
      type: Boolean,
      default() {
        return true
      }
    },
    showDetectionBtn: { // 是否显示检测按钮
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      fileUrl: `${process.env.BASE_API}/api/common/file/download?path=`,
      collapses: ['车辆信息', '车况信息', '车辆图片'],
      activeNames: [],
      carDetail: {
        images: []
      },
      bszhOption: {
        '1': '手动',
        '2': '自动',
        '3': '手自一体'
      },
      pfbzOption: {
        '1': '国三',
        '2': '国四',
        '3': '国五',
        '4': '国六'
      },
      cdOption: {
        '1': '进口',
        '2': '国产'
      }
    }
  },
  created() {
    this.init()
  },
  watch: {
    params: {
      handler(newName, oldName) {
        this.init()
      },
      deep: true
    }
  },
  methods: {
    init() {
      const queryParam = {
        icut04: this.params.icut04,
        icag01: this.params.icag01
      }
      if (!queryParam.icag01) return
      carDetailById(queryParam).then(res => {
        this.carDetail = Object.assign({}, this.carDetail, res.body.data)
        console.info(this.carDetail)
        console.info('页面信息')
        if (this.carDetail.images.length) {
          this.carDetail.images = this.carDetail.images.map(i => this.fileUrl + i.catplj)
        } else {
          if (this.carDetail.mdcxtp) {
            this.carDetail.images.push(this.carDetail.mdcxtp)
          }
        }
      })
    },
    attention() {
      const data = {
        icut04: this.params.icut04,
        icag01: this.params.icag01,
        cusfgz: this.carDetail.cusfgz === 'Y' ? 'N' : 'Y'
      }
      carAttention(data).then(res => {
        if (data.cusfgz === 'Y') {
          wx.showToast({
            title: '关注成功',
            icon: 'none',
            duration: 1000
          })
        }
        this.carDetail.cusfgz = data.cusfgz
      })
    },
    carImages() {
      wx.navigateTo({
        url: `/pages/mall/carImages?icag01=${this.params.icag01}`
      })
    },
    seereport() {
      this.$router.push({
        path: '/tab/report',
        query: {
          cajclj: this.carDetail.cajclj
        }
      })
    }
  }
}
</script>

<style lang="scss">
.component-car-detail {
  width: 100%;
  color: #003B90;

  .image-swipe-view {
    position: relative;
  }

  .swipe-view {
    width: 100%;
    height: 60vw;
  }

  .swipe-image {
    width: 100%;
    height: auto;
  }

  .swipe-msg {
    width: 100%;
    color: #003B90;
    background: #ffe135;
  }

  .swipe-heart {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }

  .collapse-title {
    color: #003B90;
    font-size: 1.1em;
    vertical-align: middle;
    font-weight: 500;
  }

  .collapse-title1 {
    color: #F76A1C;
    font-size: 1.1em;
    vertical-align: middle;
  }

  .tag-svg {
    transition: all 0.5s;
    width: 23px;
    height: 23px;
    vertical-align: middle;
    transform: rotate(180deg);
  }

  .tag-svg-zk {
    transform: rotate(0deg);
  }

  .content-msg-view {
    background-color: white;
    padding: 15px;
    color: #003B90;
    font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;


    > .msg1 {
      font-weight: 600;
      font-size: 1.1em;
    }

    > .msg2 {
      display: flex;
      justify-content: space-between;
    }

    > view {
      margin: 2px 0;
    }
  }

  .car-config-view {
    color: #003B90;
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    > view {
      padding: 2.5px 0;
      flex-grow: 1;
      min-width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      text:first-child {
        font-weight: 500;
      }
    }

    > view > text {
      padding-right: 10px;
    }

    .btn-div1 {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .config-btn {
        flex-grow: 0;
        padding: 5px 20px;
        text-align: center;
        border-radius: 50px;
        background-color: #F76A1C;
        color: white;
      }

      .config-btn:active {
        opacity: 0.8;
      }
    }

    .msg-row {
      flex-basis: 100%;
      display: flex;

      > view {
        text-align: justify;
        flex-grow: 1;
        padding-top: 0px;
        font-weight: 500;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
      }
    }
  }
}
</style>

